<!DOCTYPE>
<html>
<head>
  <title>Q.Window | QLib </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- 使用QLib控件是必须包含样式表 -->
  <link type="text/css" rel="stylesheet" href="../ui.css" />
  <!--  
  提示：src="{QLib目录}/Q.js" 
  根据实际存放路径， 测试代码都是在QLib目录的samples文件夹下，所以这里用的是"../Q.js" 
  -->
  <script type="text/javascript" src="../Q.js"></script>
  <script type="text/javascript" src="../utils/stl.js"></script>
  <script type="text/javascript" src="../ui/drag.js"></script>
  <script type="text/javascript" src="../ui/wndx-1-0-2.js"></script>
  <script>
  <!--
  var g_test_window;
  var g_test_dialog;
  var g_multi_window;
  Q.ready(function() {
    Q.$('btnOpenWindow').onclick = function() {
      g_test_window = new Q.Window({width:480, height:370, wstyle: "q-attr-no-icon|q-attr-wit1h-bottom|q-attr-fixed"});
      g_test_window.show(true);
      g_test_window.setContent(Q.$('progress'));
      g_test_window.center();
    }
  
    Q.$('btnOpenMultiWindow').onclick = function() {
      g_multi_window = new Q.Window({title: "multiwindow 1", width:480, height:370});
      g_multi_window.show(true);
      g_multi_window.center();
      
      var sub1 = new Q.Window({title: "child 1", left: 100, top: 100, width: 100, height:100, parent: g_multi_window, wstyle: CONST.STYLE_CHILD})
      var sub2 = new Q.Window({title: "child 2", left: 200, top: 200, width: 100, height:100, parent: g_multi_window, wstyle: CONST.STYLE_CHILD})
      var sub3 = new Q.Window({title: "child popup", left: 300, top: 500, width: 100, height:100, parent: g_multi_window})
    
      sub1.show(true);
      sub2.show(true);
      sub3.show(true);
    }

    Q.$('test-domodal').onclick = function() {
      Q.alert({
        parent: g_test_dialog,
        title: "test",
        content: 'test-domodal',
        onok : function() { return true; }
      });
    }
  });
  
  -->
  </script>
</head>
<body onselectstart="return false;" style="-moz-user-select:none;-webkit-user-select: none;">
<br>
<p>Q.Window | Q.Dialog</p>
<hr>
<br>
<button id="btnOpenWindow">Q.Window窗口</button>
<button id="btnOpenMultiWindow">Q.Window多窗口</button>

<br>
<!-- wndx template -->
<button id="test-domodal" style="display:none;">DoModal</button>

<div __qwindow__="" class="q-window undefined q-attr-fixed q-attr-no-min q-attr-no-max q-attr-with-bottom" style="top: 143px; left: 214px; width: 600px; height: 400px; display: none;" q-drag-object="true">
  <div class="q-title">
    <div class="q-icon"></div>
    <div class="q-title-content">提示窗口提示窗口提示窗口提示窗口提示窗口提示窗口提示窗口提示窗口提示窗口提示窗口提示窗口提示窗口提示窗口提示窗口提示窗口提示窗口</div>
    <button class="q-padding">&nbsp;</button>
    <button class="q-close">&nbsp;</button>
    <button class="q-max">&nbsp;</button>
    <button class="q-min">&nbsp;</button>
  </div>
  <div class="q-window-client">
    <button id="test-domodal">DoModal</button>
  </div>
  <div class="q-bottom-bar"></div>
  <div class="q-window-mask alpha_1" style="display: none;"></div>
</div>

<br>
<div style="position: relative; width: 300px;height: 200px;">
<div id="progress" style="position:absolute; left: 0; top:0; right:0; bottom:0;">
  dom content
</div>
</div>

</body>
</html>
